{% extends base %}

{% block head %}
    <script type="text/javascript" src="/static/lib/csv.js/csv.js"></script>
    {% include note/component/view_css.html %}

{% end %}


{% block body_left %}
    {% include note/component/editor/editor_default_vars.html %}


<script src="/static/lib/jspreadsheet-ce-4.6.0/deps/jsuites.js"></script>
<link rel="stylesheet" href="{{_server_home}}/static/lib/jspreadsheet-ce-4.6.0/deps/jsuites.css" type="text/css" />

<script src="/static/lib/jspreadsheet-ce-4.6.0/dist/jexcel.js"></script>
<link rel="stylesheet" href="{{_server_home}}/static/lib/jspreadsheet-ce-4.6.0/dist/jexcel.css" type="text/css" />

{% include note/component/editor/table_lang.html %}
{% include note/component/editor/table_myexcel.html %}

<style type="text/css">
/** 用于编辑时的换行 **/
.jexcel .editor {
    white-space: pre-wrap;
}
.jexcel td {
    word-break: break-all;
}
#myParent {
    margin-top: 5px;
    width: 100%;
}

{% if _user_config.note_table_width == "wide" %}
{# 宽表格 #}
.content-left {
    width: 100%;
}
.content-right {
    display: none;
}
{% end %}

</style>

{% set item = file %}

<div class="card">
    <div class="grid-title btn-line-height">
        <span>表格查看</span>
        {% if _user_name == file.creator %} 
            <div class="float-right">
                <button class="btn" id="saveBtn">保存</button>
                {% include note/component/option/note_dropdown.html %}
                {% include common/button/back_button.html %}
            </div>
        {% end %}
    </div>
</div>

<div class="card">
    {% include note/component/note_path.html %}
</div>

<div class="card">
    <textarea id="content" class="hide">{{file.content}}</textarea>
    <div id="myParent" class="row">
        <div id="my"></div>
    </div>
</div>

<script type="text/javascript">

$(function () {
    var content = $("#content").val();
    var rows = [];
    var jsonData = null;
    var MIN_WIDTH = 50;

    try {
        if (content != "") {        
            jsonData = JSON.parse(content);
            content = jsonData.content;
            if (jsonData.version == "v2") {
                rows = jsonData.rows;
            } else if (typeof(content) === "string") {
                // 兼容历史数据
                rows = CSV.parse(content);
            } else {
                alert("非法版本:", jsonData.version);
            }
            console.log("新版本", jsonData);
        }
    } catch (e) {
        rows = CSV.parse(content);
    }

    if (rows.length == 0) {
        rows = [
            ['A', 'B', 'C', 'D', 'E'],
            ['', '', '', '', '']
        ];
    }

    var head = rows[0];
    var data = rows.slice(1); // 删除head
    var columns = [];
    var colWidths = [];

    var visibleWidth = $("#myParent").width() - 60;
    var width = visibleWidth / head.length;
    width = Math.max(width, MIN_WIDTH);
    
    head.forEach(function () {
        columns.push({type: "text", align:"left"});
    });

    head.forEach(function () {
        colWidths.push(width);
    });

    var myExcel = new MyExcel();

    if (jsonData != null && jsonData.widthInfo) {
        colWidths = myExcel.getWidthInfoFromData(jsonData.widthInfo, visibleWidth);
    }

    console.log("colWidths:", colWidths);

    var excel = $('#my').jexcel({
        data: data,
        colHeaders: head,
        colWidths: colWidths,
        columns: columns,
        wordWrap: true,
        columnSorting: false,
        text: jexcelTextCN,
        onevent: function (eventType) {
            console.log(arguments);
            if (eventType == "onload") {
                myExcel.init(this);
                myExcel.onload();
            }
            if (eventType == "onresizecolumn") {
                console.log("调整单元格大小");
                myExcel.onresizecolumn();
            }
        },
    });

    myExcel.init(excel);
    
    xnote.excel = excel;
    xnote.myExcel = myExcel;

    $("#saveBtn").click(function () {
        var head = $("#my").jexcel("getHeaders", true);
        var data = $("#my").jexcel('getData');
        data.splice(0, 0, head);

        var jsonData = {
            widthInfo: myExcel.getWidthInfo(),
            rows: data,
            version: "v2"
        }

        var params = {
            id:"{{file.id}}",
            version: "{{file.version}}",
            content: JSON.stringify(jsonData)
        }

        console.log(params);

        $.post("/note/save?type=csv", params, function (resp) {
            console.log(resp);
            if (resp.code == "success") {
                // window.location.reload();
                window.location.href = "/note/view?id={{file.id}}";
            } else {
                xnote.alert(resp.message);
            }
        })
    });

    $("body").on("click", ".edition", function (e) {
        console.log(e.target);
    });
});
</script>


{# 文章信息 #}
{% include note/component/note_ext_info.html %}

{# 评论功能 #}
{% if file_type != "group" and show_comment %}
    {% include note/page/comment.html %}
{% end %}

{# 分页 #}
{% if show_pagination and "page" in globals() %}
    <div class="card">
        {% include mod_pagenation.html %}
    </div>
{% end %}

{% include note/component/script/delete_script.html %}
{% include note/component/script/rename_script.html %}

<script type="text/javascript">

$(function () {
window.adjustTable();
})
</script>

{% end %}


{% block body_right %}
<div class="desktop-only">
    {% init show_sidebar_group_entry = False %}
    {% init show_sidebar_note_brothers = True %}
    {% include note/component/sidebar/note_sidebar.html %}
</div>
{% end %}
